<template>
	<view class="register">
		<view class="logo"><image src="/static/images/logo.png" mode=""></image></view>
		
		<!-- 忘记密码页面 -->
		<view class="information">
			<view class="public">
				<image src="/static/images/mobile.png"></image>
				<input type="text" placeholder="输入手机号码" v-model="account" />
			</view>

			<!-- 验证码登录 -->
			<view class="public">
				<image src="/static/images/public.png"></image>
				<input type="text" placeholder="填写验证码" class="codeIput" v-model="captcha" />
				<button v-if="isCountDownShow" class="getAuthCode">{{ remaining }}秒</button>
				<button v-else class="getAuthCode" @click="code">获取验证码</button>
			</view>

			<view class="public">
				<image src="/static/images/password.png"></image>
				<input type="password" placeholder="请输入新密码" class="codeIput" v-model="password" />
			</view>
			<view class="public">
				<image src="/static/images/password.png"></image>
				<input type="password" placeholder="再次确认密码" class="codeIput" v-model="againPassword" />
			</view>
		</view>

		<view class="logoButton"><button class="loginTo" @click="registerReset">确定</button></view>

		<view class="operate">
			 <!-- 忘记密码页面 -->
			<navigator url="/pages/login/login" open-type="redirect" hover-class="other-navigator-hover">
				 <view class="LoginImmediately">立即登录</view>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			logoColorIndex: 0,
			current: 1,
			account: '',
			password: '',
			againPassword:'',
			captcha: '',
			formItem: 1,
			type: 'login',
			logoUrl: '',
			keyCode: '',
			codeUrl: '',
			codeVal: '',
			isShowCode: false,
			isCountDownShow:false,// 验证码显示
			remaining: 60 //显示剩余时间
		};
	},
	methods: {
		// 修改密码
		registerReset() {
			var that = this;
			if (!that.account.trim()) return that.$common.errorToShow('请填写手机号码');
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account.trim())) return that.$common.errorToShow('请输入正确的手机号码');
			if (!that.captcha.trim()) return that.$common.errorToShow('请填写验证码');
			if(that.password !== that.againPassword) return that.$common.errorToShow('两次密码不一致');
			that.$api.registerReset({
				phone: that.account,
				sms_code: that.captcha,
				password: that.password
			},res => {
				that.$common.errorToShow(res.message);
				setTimeout(() => {
					uni.navigateTo({
					    url: '/pages/login/login/index1'
					});
				},1000)
			})
		},
		
		//验证码倒计时
		getmsglist() {
			let that = this
			let clearTime = setInterval(function() {
				if(that.remaining <= 0) {
					that.isCountDownShow = false
					that.remaining = 60
					clearInterval(clearTime)
				}
				that.remaining--
			}, 1000);
		},
		
		// 获取验证码
		code() {
			let that = this;
			if (!that.account) return that.$common.errorToShow('请填写手机号码');
			if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account)) return that.$common.errorToShow('请输入正确的手机号码');
			if (that.formItem == 2) that.type = "register";
			that.getmsglist()
			that.isCountDownShow = true
			that.$api.registerVerify({
				phone: that.account,
				type: that.type,
				key: that.keyCode,
				code: that.codeVal
			},res => {
				that.$common.errorToShow(res.message);
			})
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #ffffff;
}
.register {
	width: 100%;
	height: 100%;
	.logo {
		background-color: #ffffff;
		text-align: center;
		padding-top: 167rpx;
		image {
			width: 230rpx;
			height: 266rpx;
		}
	}

	.information {
		background-color: #ffffff;
		padding: 20rpx 100rpx;
		.public {
			width: 550rpx;
			height: 132rpx;
			line-height: 132rpx;
			border-bottom: 2rpx solid #dcdcdc;
			padding-top: 15rpx;
			position: relative;
			display: flex;
			align-items: center;
			.getAuthCode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				display: inline-block;
				font-size: 24rpx;
				color: #e25b29;
				background-color: #ffd7c7;
				width: 150rpx;
				height: 60rpx;
				border-radius: 30px;
				line-height: 60rpx;
				overflow: hidden;
			}
		}
		image {
			width: 24rpx;
			height: 34rpx;
			margin-right: 20rpx;
			margin-bottom: 5rpx;
		}
		input {
			font-size: 30rpx;
			font-family: PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			color: #333;
			line-height: 42rpx;
		}
	}
	.logoButton {
		background-color: #ffffff;
		padding: 35rpx 100rpx;
		.loginTo {
			width: 549rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			color: #ffffff;
			border-radius: 38rpx;
			background: linear-gradient(to right, #f4a323, #e25a29);
		}
	}
	.operate {
		background-color: #ffffff;
		padding: 0 100rpx;
		navigator {
			display: inline-block;
		}
		.LoginImmediately {
			float: right;
			color: #e25a29;
		}
	}
}
</style>
